<template>
  <div class="content">
<!--    <input v-model="toUserID" /><span @click="invite">发起会话</span>-->
    <div class="chat-block">
      <div class="conversation-list" ref="messageList">
        <div class="logo" style="font-family: fzhzgbjt;font-size: 24px;margin-left: 15px;">
          塞上就业
        </div>
        <div class="conversation-list-block">
          <template v-if="conversationList.length>0">
            <div @click="openConversation(item.conversationID,item.userProfile.userID)" v-for="item in conversationList" :key="item.conversationID">
              <ConversationItem :conversation="item" :active="!!(conversation&&conversation.conversationID===item.conversationID)" :ref="'conversationItem_'+item.conversationID"></ConversationItem>
            </div>
          </template>
          <div v-else class="empty">暂无数据</div>
        </div>
      </div>
      <div class="chat-conversation">
        <template v-if="conversation">
          <div class="header-title-block">
            <div class="conversation-name">{{conversationName}}</div>
<!--            <div class="conversation-abstract"></div>-->
          </div>
          <div class="message-block">
            <MessageList ref="messageList" :conversation="conversation"></MessageList>
          </div>
          <div class="input-block">
            <MessageInput ref="messageInput" :conversation="conversation"></MessageInput>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import ConversationItem from "@/pages/im/components/Conversation/ConversationItem";
import MessageList from "@/pages/im/components/Message/Render/MessageList";
import MessageInput from "@/pages/im/components/Message/MessageInput";

export default {
  name: "index",
  data() {
    return {
      readTimer:null,
      conversationLoading:false,
      conversationList:[

      ],
      conversation:null,
      toUserID:'',
      conversationName:'',
    }
  },
  components: {
    MessageInput,
    MessageList,
    ConversationItem
  },
  methods:{
    invite(){
      if(this.toUserID.length>0){
        const message=this.tim.createTextMessage({
          to:this.toUserID,
          conversationType:this.TIM.TYPES.CONV_C2C,
          payload:{
            text:'你好啊'
          }
        })
        this.tim.sendMessage(message).then(()=>{
          this.$message.success('消息发送成功')
        }).catch((err)=>{
          console.log(err);
          this.$message.error('消息发送失败')
        })
      }
    },
    sendMessage(event) {
      // 将自己发送的消息写进消息列表里面
      this.$refs.messageList.updateMessageList(event.detail.message);
    },
    //获取会话列表
    getConversationList(){
      this.conversationLoading=true
      this.tim.getConversationList().then((res)=>{
        this.conversationLoading=false;
        this.conversationList=res.data.conversationList;
      }).catch((err)=>{
        this.conversationLoading=false;
        this.$message.error('会话列表获取失败，请刷新再试');
      })
    },
    openConversation(conversationID,toUserID){
      if(!this.conversation||this.conversation.conversationID!==conversationID){
        //已读回执
        this.tim.setMessageRead({conversationID})
        this.tim.getConversationProfile(conversationID).then(res => {
          const {
            conversation
          } = res.data;
          this.conversation = conversation;
          this.conversationName=this.getConversationName(conversation);
        });
      }
    },
    getConversationName(conversation) {
      if (conversation.type === '@TIM#SYSTEM') {
        return '系统通知';
      }

      if (conversation.type === 'C2C') {
        return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
      }

      if (conversation.type === 'GROUP') {
        return conversation.groupProfile.name || conversation.groupProfile.groupID;
      }
    },
    setMessageRead(){
      if(this.conversation){
        this.tim.setMessageRead({conversationID:this.conversation.conversationID});
      }
    }
  },
  mounted() {
    if(this.$store.state.user.IMReady){
      this.getConversationList();
    }
    this.$bus.$on('sendMessage',this.sendMessage);
    window.addEventListener('keyup',this.utils.throttle(this.setMessageRead,1000))
    window.addEventListener('mousemove',this.utils.throttle(this.setMessageRead,1000))
  },
  beforeCreate() {
    // 会话列表更新，event.data 是包含 Conversation 对象的数组
    this.$bus.$on('onConversationListUpdated',()=>{
      if(this.$store.state.user.IMReady){
        this.getConversationList();
      }
    })
  },
  beforeDestroy() {
    this.$bus.$off('onConversationListUpdated');
    this.$bus.$off('sendMessage');
    window.removeEventListener('keyup',function (){

    });
    window.removeEventListener('mousemove',function (){

    });
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: $contentWidth;
  min-height: $fullMinHeight;
  margin: 0 auto;
  overflow: hidden;
  .chat-block {
    margin: 15px 0;
    width: 100%;
    height: 754px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    .conversation-list{
      background: #eceff4;
      width: 260px;
      height: 100%;
      .logo{
        margin: 0 10px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #e2e2e2d6;
      }
      .conversation-list-block{
        height: calc(100% - 75px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }
    }
    .chat-conversation{
      width:calc(100% - 260px);
      height: 100%;
      .header-title-block{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 75px;
        border-bottom: 1px solid #e2e2e2d6;
        padding: 0 30px;
        font-weight: bold;
        font-size: 17px;
      }
      .message-block{
        width: 100%;
        height: calc(100% - 180px - 75px);
      }
      .input-block{
        height: 180px;
        width: 100%;
      }
    }
  }
}
</style>
